<template>
  <div>
    <el-row>
      <el-col
        :span="20"
        :offset="2"
        class="block"
        style="height: 450px; background: #eee"
      >
        <el-row>
          <!-- 图片 -->
          <el-col class="">
            <el-carousel height="450px" width="100%" class="banner">
              <el-carousel-item v-for="item in 3" :key="item">
                <img
                  style="height: 450px"
                  width="100%"
                  :src="$target + item + '.jpg'"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
</style>
<script>
export default {
  data() {
    return {
      shoplist: "", //导航菜单数据
      goods: "", //商品列表
      goodslist: "", //展示商品列表
      isShow: false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    onmouse(id) {
      this.isShow = true;
      var _this = this;
      for (let item of _this.shoplist) {
        if (item.cat_id == id) {
          _this.goods = item.children;
        }
      }
    },
    outmouse() {
      this.isShow = false;
      // $(".showDetails").addClass("showOrhide");
    },
  },
  created() {
    //获取一层数据
    this.$axios
      .get("categories", {})
      .then((res) => {
        this.shoplist = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
